<template>
	<Header></Header>
	<div class="contaienr">
		<div>
			<img :src="prouduct.cover" :alt="prouduct.name">
		</div>
		<div class="info">
			<div>
				<p>{{ prouduct.name }}</p>
				<p>价格：{{ prouduct.price }}</p>
				<p>{{ prouduct.inventory }}</p>
			</div>
			
			<div>
				<el-input-number v-model="inventory" :min="1" :max="prouduct.inventory" />
				&nbsp;
				<el-button type="primary" @click="handleAddGoods">添加购物车</el-button>
			</div>
		</div>
	</div>
</template>

<script setup>
import Header from '@/components/Header.vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import useUserStore from '../store/module/user.js';

const userStore = useUserStore()

const route = useRoute();
const { id } = route.params;

const inventory = ref(1)
const prouduct = ref({
	id: '',
	name: '',
	cover: '',
	price: '',
	inventory: 1
})


// 获取数据
const fetchData = async () => {
	const result = await axios.get('/data.json');

  const data = result.data.data.find(item => item.id === id);

	prouduct.value = data;
}

const handleAddGoods = () => {
	userStore.addGoodsCart({
		...prouduct.value,
		count: inventory.value
	})

	ElMessage({
    message: '添加成功！',
    type: 'success',
  })
}

onMounted(() => {
	fetchData();
})

</script>
<style scoped lang="less">
.contaienr {
display: flex;
justify-content: center;
gap: 6px;
padding-top: 2rem;
img {
width: 340px;
}
.info {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
</style>